今天也是個常用的React的一個Hook，讓我們看下去吧

useEffect

主要用於不是由事件引起而是由渲染本身引起的操作，例如更改DOM發送AJAX等等

那麼就可以當你進入畫面進行渲染時他就做動作，例如渲染時要一同get資料，運行的樣子如下

範例

const url = '可以自行寫個json測試'
const [list, setList] = useState([])
    useEffect(() => {
        async function getList() {
            const res = await fetch(url)
            const jsonRes = await res.json()
            console.log(jsonRes)
            setList(jsonRes.data.channels)
        }
        getList()
    }, [])
return(
<>
    <div>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
    </div>
</>
)

依賴向

在上面的code中最後useEffect的尾巴有[]，這個叫做依賴向，那麼依賴向會有甚麼差呢?

接下來會說明不同依賴向下的useEffect函數會如何進行(有三種)

• 無依賴項
  useEffect：組件初始渲染+組件更新時執行
  範例

    useEffect(() => {
        console.log('沒有依賴向')
    })
    const [count, setCount] = useState(0)
    
    return (
        <>
            <button onClick={() => setCount(count + 1)}>{count}</button>
        </>
    )

在進入網頁時觸發了useEffect，且當點擊button時他都會觸發useEffect，因為組件更新了。

• 空數組依賴項
  useEffect：只在初始渲染時執行一次，就是開頭那個範例，或是將上個改成這樣

    useEffect(() => {
        console.log('空數組依賴向')
    },[])

• 有特定依賴項
  useEffect：組件初始渲染+特性依賴向變化時執行
  範例

    const [count2, setCount2] = useState(0)
    useEffect(() => {
        console.log('特定依賴向鎖定count2')
    }, [count2])
    const [count, setCount] = useState(0)

    return (
        <>
        <button onClick={() => setCount(count + 1)}>{count}</button>
        <button onClick={() => setCount2(count2 + 1)}>count2:{count2}</button>
        </>
    )

在這，你點及btn2時才會再次觸發，可自行將依賴向改成空來對比，就能明確看出有進行追蹤的依賴向有變化才會觸發useEffect

以上這幾種區別

小示範

那我們就可以來做個小示範

function Practise() {
    const [open, setOpen] = useState(false)

    function Son() {
        useEffect(() => {
            const timer = setInterval(() => {
                console.log('計時器啟用中...')
            }, 1000)
            return () => {
                clearInterval(timer)
                console.log('計時器已關閉')
            }
        }, [])

        return (
            <div>
                Son 組件
            </div>
        )
    }

    return (
        <>
            {open && <Son />}
            <button onClick={() => setOpen(!open)}>open：{open.toString()}</button>
        </>
    )
}

在這個示範中，當點擊 open 按鈕時，Son 組件會被加載進頁面並且開始計時（每隔一秒觸發一次計時器）。當 open 為 false 時，Son 組件會被卸載，計時器也會被清除。

今天就到這啦